<template>
  <PageListContainer>
    <BreadCrumb>
      <template #default>
        <el-breadcrumb separator="/">
          <el-breadcrumb-item :to="{ name: 'DyjTeam' }">团队列表</el-breadcrumb-item>
          <el-breadcrumb-item>抖音号列表</el-breadcrumb-item>
        </el-breadcrumb>
      </template>
    </BreadCrumb>
    <div class="base-block">
      <k-search :model="state.params" @search="methods.onSearch" @reset="methods.onReset">
        <el-form-item label-width="0px">
          <el-input v-model="state.params.account_info" style="width: 200px" clearable placeholder="请输入抖音号、抖音昵称" />
        </el-form-item>
        <el-form-item label="小组">
          <el-select v-model="state.params.group_id" placeholder="全部">
            <el-option v-for="o of teamList" :key="o.group_id" :value="o.group_id" :label="o.group_title" />
          </el-select>
        </el-form-item>
        <el-form-item label="成员">
          <el-select v-model="state.params.member_id" placeholder="全部">
            <el-option v-for="o of memberList" :key="o.member_id" :value="o.member_id" :label="o.user_name" />
          </el-select>
        </el-form-item>
        <el-form-item label="抖音状态">
          <el-select v-model="state.params.state" placeholder="全部">
            <el-option v-for="(o, i) of accountStateOptions" :key="i" :value="o.value" :label="o.label" />
          </el-select>
        </el-form-item>
        <el-form-item label="监控状态">
          <el-select v-model="state.params.is_monitor" placeholder="全部">
            <el-option v-for="(o, i) of monitorStateOptions" :key="i" :value="o.value" :label="o.label" />
          </el-select>
        </el-form-item>
      </k-search>
    </div>

    <div class="base-block">
      <KTable v-bind="tableState" v-on="tableEvent">
        <template #unique_id="{row}">
          <div class="user-info-box">
            <img class="avatar" :src="row.avatar" alt="">
            <div>
              <div>{{ row.author }}</div>
              <div>{{ row.unique_id }}</div>
            </div>
          </div>
        </template>

        <!-- 千川授权: TODO: -->
        <template #qc_authorized="s">
          <div v-if="s.row.is_ecp && s.row.is_ecp_authorized" class="flex-center">
            <!-- <i class="circle success mr-4"></i> -->
            <el-icon class="mr-4"><SuccessFilled /></el-icon>
            <p class="state-desc">已授权</p>
          </div>
          <p v-else>-</p>
        </template>

        <!-- 授权时间 -->
        <template #authorization_time="s">
          <div v-if="s.row.authorization_time"> {{ dayjs.unix(s.row.authorization_time).format('YYYY-MM-DD HH:mm:ss') }} </div>
          <div v-else>-</div>
        </template>

        <!-- 操作 -->
        <template #actions="s">
          <el-link type="primary" @click="onClickLog(s.row)">操作日志</el-link>
        </template>
      </KTable>
    </div>
    <EditDrawer ref="drawerRef" />
  </PageListContainer>
</template>
<script setup lang="ts">
import { ref, computed, onMounted } from 'vue';
import { useRouter } from 'vue-router';
import EditDrawer from './components/edit-drawer.vue';
import BreadCrumb from '@/components/base-bread-crumb/index.vue';
import { SuccessFilled } from '@element-plus/icons-vue';
import dayjs from 'dayjs';
import { getMonitorTitleList, getMonitorMemberList, getMonitorList } from '@/api/crm-dyj/team';
import { accountStateOptions, monitorStateOptions, useTableList } from './hooks/use-table';

defineOptions({ name: 'DyjTeam' });
const drawerRef = ref();
const router = useRouter();
const teamId = computed(() => router.currentRoute.value.query.teamId);
const { state, tableState, tableEvent, ...methods } = useTableList({
  getParams: (params: any) => {
    params.team_id = teamId.value;
    return params;
  },
  getList: (params) => {
    return getMonitorList(params);
  }
});

// 小组列表
const teamList = ref<any[]>([{ group_id: '', group_title: '全部' }]);
const getTeamList = async () => {
  const { err, data } = await getMonitorTitleList({ team_id: teamId.value });
  if (err) return;
  teamList.value = teamList.value.concat(data ?? []);
};
// 成员列表
const memberList = ref<any[]>([{ member_id: '', user_name: '全部' }]);

const getMemberList = async () => {
  const { err, data } = await getMonitorMemberList({ team_id: teamId.value });
  if (err) return;
  memberList.value = memberList.value.concat(data ?? []);
};

const onClickLog = (row: any) => {
  drawerRef.value?.show(1, row);
};

onMounted(() => {
  getTeamList();
  getMemberList();
});
</script>
<style lang="scss" scoped>
.user-info-box {
  display: flex;
  align-items: center;

  .avatar {
    display: block;
    width: 50px;
    height: 50px;
    margin-right: 10px;
    overflow: hidden;
    border-radius: 50%;
  }
}

.flex-center {
  display: flex;
  align-items: center;
}
</style>
